/**
 * @Date 2023-02-24 13:46:57
 * @Remark
 */

// react
import React, { useEffect } from "react";
// lib
import { Modal, Form, Input, Row, Col, Space } from "antd";
// components & widget
import CodeBtn from "components/CodeBtn";
// style
// config
import { MODULE_NAME } from "./config";
import { MODAL_STYLE } from "project/config";
import { INPUT_REQUIRED_RULE } from "project/validRules";
// script & methods & public
import { verifyMobile } from "utils/validator";
// store
import { observer } from "mobx-react";
import { state } from "./state";
// controller
import { addUser } from "./controller";
// interface
// 其它

function EditModal() {
  const [form] = Form.useForm();

  const show = state.editModalShow;
  const title = `${state.editInfo ? "编辑" : "新增"}${MODULE_NAME}`;

  useEffect(() => {
    if (show) {
      form.resetFields();
    }
    if (state.editInfo) {
      const info = state.editInfo;
      form.setFieldsValue({
        ...info,
      });
    }
    return () => {
      //
    };
  }, [form, show]);

  const handleCancel = () => {
    state.editModal = false;
  };

  const handleOk = async () => {
    try {
      const result = await form.validateFields();
      if (state.editInfo) {
        // updateUser(result, state.editInfo.id);
      } else {
        addUser(result);
      }
    } catch (error) {
      //
    }
  };

  return (
    <Modal
      title={title}
      open={show}
      onCancel={handleCancel}
      onOk={handleOk}
      width={800}
      destroyOnClose
      maskClosable
      forceRender
      okButtonProps={{
        loading: state.editModalLoading,
      }}
    >
      <Form {...MODAL_STYLE.FORM_8_16} form={form}>
        <Row>
          <Col span={12}>
            <Form.Item
              name="userName"
              label="用户姓名"
              rules={[INPUT_REQUIRED_RULE]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="identityId"
              label="用户ID"
              rules={[INPUT_REQUIRED_RULE]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="mobile"
              label="登录手机号"
              rules={[INPUT_REQUIRED_RULE, { validator: verifyMobile }]}
            >
              <Space.Compact style={{ width: "100%" }}>
                <Input maxLength={11} />
                <CodeBtn
                  mobile={() => {
                    const value = form.getFieldValue("mobile");
                    return value;
                  }}
                />
              </Space.Compact>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="verificationCode"
              label="短信验证码"
              rules={[INPUT_REQUIRED_RULE]}
            >
              <Input maxLength={6} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="identityNumber"
              label="身份证号码"
              rules={[INPUT_REQUIRED_RULE]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={12}></Col>
          <Col span={12}>
            <Form.Item
              name="pass"
              label="账号密码"
              rules={[INPUT_REQUIRED_RULE]}
            >
              <Input.Password />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="pwd"
              label="再次输入密码"
              rules={[INPUT_REQUIRED_RULE]}
            >
              <Input.Password />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}

export default observer(EditModal);
